<script setup name="PersonnelReport">
import { ref,onMounted } from "vue";
import { CreditCard} from '@element-plus/icons-vue'
import {selectData1,selectDataWeb1,saveData1,deleteFun,insertFun2,updateFun  } 
from "./js/InsertDeleteSelectUpdates1205";
import { ElMessage } from 'element-plus';

const dataSourceTableConstRybm = ref([]);
const dataSourceTableConstRyqx = ref([]);


const dataSourceTableConstZuoChe = ref([]);
const dataSourceTableConstYuoChe = ref([]);
const buttonConst=ref("");
//人员界面查询名称变量
const inputValue=ref("");
 
//第一个表格获取全部人员信息
const selectRybm=async ()=>{
     const res=await  selectData1('100080',{bmbm:'',rylb:'',rybm:'',ryxm:inputValue.value},"");
     dataSourceTableConstRybm.value=res.ReContent;
     
}
//第二个表格根据在第一个表格双击的行的人员编码获取对应的菜单模块权限信息
const selectRyqx=async ()=>{
     const res=await  selectData1('100157',{rybm:'3016'},"");
     dataSourceTableConstRyqx.value=res.ReContent;  
}
//第三个表格根据第二个表格双击的行对应的菜单编码获取该用户能看到的子菜单列表
const selectRyqxBb=async ()=>{
     const res=await  selectData1('100019',{InParamDqxglyhb:{"vrybm":'3016',"vmkbm":'65',"vfzbh":'0'}},"");
     dataSourceTableConstRyqx.value=res.ReContent;  
}



const select1=async ()=>{
    dataSourceTableConstZuoChe.value=await  selectData1('100019',{InParamDqxglyhb:{"vrybm":'3001',"vmkbm":'65',"vfzbh":'0'}},"");
    dataSourceTableConstZuoChe.value=dataSourceTableConstZuoChe.value.ReContent;
}
//选择菜单后根据菜单类别获取右边列表的明细数据
const row1={row:{Key:'',Value:''}}
const select2=async (row )=>{
    buttonConst.value=row.row.Value;
    //把当前行的类别记录下来后面保存的时候刷新右侧的表格的时候用
    row1.row.Key=row.row.Key;
    row1.row.Value=row.row.Value;
    dataSourceTableConstYuoChe.value=await  selectData1('100101',{"bh":row.row.Key},"");
    dataSourceTableConstYuoChe.value=dataSourceTableConstYuoChe.value.ReContent;
}
const insert1=()=>{
const insertObj={
  aaa100:dataSourceTableConstYuoChe.value[0].aaa100 ,
  aaa101:dataSourceTableConstYuoChe.value[0].aaa101 ,
  aaa102:'',
  aaa103:'',
  aaa104:'1',
  aaa105:'',
  saveFlag: 1 
};
  insertFun(insertObj,'aaa103',dataSourceTableConstYuoChe.value);
}

const update1=(row ,i )=>{
    updateFun(row,i,dataSourceTableConstYuoChe.value);
}
const save1=async ()=>{
    const res=await saveData1('100102','',dataSourceTableConstYuoChe.value);
    if(res !=undefined){
        console.log(res );
        if(res.Flag==true){
            select2(row1 );
            ElMessage({
                showClose: true,
                message: '保存数据成功',
                type: 'success',
                duration:'5000',
                offset:40 
            });
        }
    }
}
const cancelEvent = (value) => {
    if(value.$event.key=='Enter'){
        selectRybm();
    }
};





onMounted(()=>{
    selectRybm();
    selectRyqx();
    //  select1();
    //  console.log(dataSourceTableConstZuoChe.value );
        
  
});
</script>

<template>
<!-- 最外层灰色内边距8px盒子 -->
<div class="main-content">
    <!-- 次外层白色内边距12px盒子 -->
    <div class="main-content-case">
        <!-- 左侧菜单盒子 -->
        <div class="main-content-left">
            <div class="main-content-lefts">
                <div class="main-content-left-button">
                    <vxe-input v-model="inputValue" 
                        prefix-icon="vxe-icon-search" 
                        placeholder="请输入名称查询" 
                        style="width: 100%;"
                        @keyup="cancelEvent"
                        >
                    </vxe-input>
                 </div>
                 <div style="height: calc(100% - 64px);width: 100%;margin-bottom: 16px;">
                    <vxe-table
                        ref="tableRef"
                        border
                        height= 100%
                        show-overflow
                        style="width: 100%; cursor: pointer; /* 可选：使光标变为指针，表示可点击 */"
                        :columnConfig="{resizable: true}"
                        :row-config="{isCurrent:true,isHover:true}"
                        :edit-config="{mode: 'cell',  trigger: 'click',showIcon:false}"
                        :data="dataSourceTableConstRybm"
                        :scroll-y="{enabled: true, gt: 0}"  
                        @cell-click="(row) => select2(row)"   
                        >
                    <vxe-column type="seq" width="50"> 
                    </vxe-column>
                    <vxe-column field='rybm'  title='用户代码'   width=100  >
                    </vxe-column>
                    <vxe-column field='ryxm'     title='用户名称'      width=140  >
                    </vxe-column>
                    </vxe-table> 
                </div>
            </div>
          

           
        </div>  
        <!-- 右侧内容盒子 -->
        <div  class="main-content-right">
            <!--标题盒子20px -->
            <div class="main-content-right-title">
                <div class="divz">
                    <div  class="div1"  >码表名称：</div>
                    <div class="div2 xpFont" >{{buttonConst}}</div> 
                </div>
                <div class="divy">
                    <div class="button-case-box">
                        <el-button @click="select1()" type="primary" :icon="CreditCard"
                                    style=" float: right;width: 76px;height: 32px;top:12px;">保存</el-button>
                    </div>
                    
                </div>
                 
                 
                    

            </div>
            <!-- 分割灰色线盒子17px -->
            <div class="main-content-right-line"></div>
            
            
            <!-- 表格盒子 -->
            <div class="main-content-right-table"> 
                <div class="table-case-left">
                    <vxe-table
                    ref="tableRef"
                    border
                    :columnConfig="{resizable: true}"
                    :row-config="{isCurrent:true,isHover:true}"
                    :edit-config="{mode: 'cell',  trigger: 'click',showIcon:false}"
                    :data="dataSourceTableConstYuoChe"
                    height= auto
                    :scroll-y="{enabled: true, gt: 0}"  
                    show-overflow
                    @editActivated="(row) => update1(row,1)"   
                    @edit-closed="(row) => update1(row,2)"   
                    @cell-click="(row) => update1(row,3)"   
                >
            
            <vxe-column field='aaa100'   title='报表类型代码'   width=153  >
            </vxe-column>
            <vxe-column field='aaa101'   title='报表类型名称'  width=200   >
            </vxe-column>
            </vxe-table> 
                </div> 
                <div class="table-case-right">
                    <vxe-table
                    ref="tableRef"
                    border
                    :columnConfig="{resizable: true}"
                    :row-config="{isCurrent:true,isHover:true}"
                    :edit-config="{mode: 'cell',  trigger: 'click',showIcon:false}"
                    :data="dataSourceTableConstYuoChe"
                    height= auto
                    :scroll-y="{enabled: true, gt: 0}"  
                    show-overflow
                    @editActivated="(row) => update1(row,1)"   
                    @edit-closed="(row) => update1(row,2)"   
                    @cell-click="(row) => update1(row,3)"   
                >
            <vxe-column type="seq" width="60"> 
            </vxe-column>
            <vxe-column field='aaa100'   title='选择'   width=60  >
            </vxe-column>
             
            <vxe-column field='aaa101'   title='报表菜单编号'  width=120   >
            </vxe-column>
            <vxe-column field='aaa102'   title='报表菜单名称'  width=600   >
            </vxe-column>
            </vxe-table> 
                </div>  
            </div>
        </div>
        
    </div>
</div>


</template>

<style lang="scss" scoped>
 
.main-content{
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 83px);
  background: #f7f7f7;

  .main-content-case{
    width: 100%;
    height: 100%;
    background:#fff;
    padding: 0px 12px 12px 12px;
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
    display: flex;
    //左侧菜单盒子
    .main-content-left{
        
        width: 294px;
        height: 100%;
        margin-right: 12px;
        .main-content-lefts{
             
            width: 100%;
            height: 100%;
            margin-top: 12px;
            border: 1px solid #EBEBEB;
            .main-content-left-button{
            height: 32px;
            margin: 12px 12px 11px 12px;
            
            }

        }


        


    }
    //右侧内容盒子
    .main-content-right{
        width: calc(100% - 306px);
        border-left: 1px solid  #EBEBEB;
        padding-left: 12px;

        // 标题盒子20px
        .main-content-right-title{
            display: flex;
            padding-top:12px ;
            padding-bottom: 12px;
            width: 100%;
            height: 56px;
            
            .divz{
                width: 50%;
                display: flex;
                margin-top: 6px;
                .div1{
                width: 70px;      
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #999999;
                line-height: 20px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                }
                .div2{
                    width: 300px;
                    
                }
            }
            .divy{
                width: 50%;
                height: 100%;
                 
                 //按钮盒子52px       
                .button-case-box {
                    width: 100%;
                    height: 100%;
                    
                     
                     
                }
            }
            
           
     

            
        } 

        
       
        
        //分割灰色线盒子17px
        .main-content-right-line{
            
            border: 1px solid #EBEBEB;
        }
        //表格盒子
        .main-content-right-table{
            height: calc(100% - 67px);
            width: 100%;
            margin-top: 12px;
            display: flex;
            .table-case-left{
                width: 355px;
                height: 100%;
                margin-right: 12px;
            }
            .table-case-right{
                width:calc(100% - 367px);
                height: 100%;
            }
        }

    }
  }


}
.xpFont{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
.xpFontText-align{
  text-align: left;
}
.xpFontColor{
    color: #333333;
}
</style>